$(function() {
    initCateList();

    // 封装函数渲染文章列表
    function initCateList() {
        axios.get('/my/cate/list').then(({ data: res }) => {
            const rows = [];
            res.data.forEach((item, index) => {
                rows.push(` <tr>
        <td>${index + 1}</td>
        <td>${item.cate_name}</td>
        <td>${item.cate_alias}</td>
        <td>
            <button type="button" class="layui-btn layui-btn-xs btn-edit" data-id="${item.id}">修改</button>
            <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn-delete" data-id="${item.id}">删除</button>
        </td>
    </tr>`)
            })
            $('tbody').html(rows);
        })

    }
    // 自定义表单验证规则
    layui.form.verify({
        name: [/^\S{1,10}$/, '分类的名字必须是1-10位非空字符!'],
        name_alias: [/^[a-zA-Z0-9]{1,15}$/, '分类的别名必须是1-15位的字母或数字!']
    })

    // 给添加文章分类按钮设置弹出层
    let addIndex = null;
    $('#btnShowAdd').on('click', function() {
        // 不管是使用哪种方式创建层，都是走layer.open()
        addIndex = layer.open({
            type: 1,
            area: ['500px', '250px'],
            title: '添加文章分类',
            content: $('#template_add').html()
        });
    })

    // 弹出层表单监听submit事件(动态创建采用事件委托)
    $('body').on('submit', '#form-add', function(e) {
        e.preventDefault();
        const data = $(this).serialize();
        axios.post('/my/cate/add', data).then(({ data: res }) => {
            if (res.code === 0) {
                // 1.提示用户
                layer.msg('更新分类成功!');
                // 2.渲染分类列表
                initCateList();
                // 3.关闭弹出层
                layer.close(addIndex);
            }
        })
    })

    // 修改图书分类
    let editIndex = null;
    $('tbody').on('click', '.btn-edit', function() {
        const id = $(this).attr('data-id');
        if (id == 1 || id == 2) {
            return layer.msg('管理员禁止修改此数据!')
        }
        editIndex = layer.open({
            type: 1,
            area: ['500px', '250px'],
            title: '修改文章分类',
            content: $('#template_edit').html()
        });

        axios.get('/my/cate/info', {
            params: { id }
        }).then(({ data: res }) => {
            if (res.code === 0) {
                layui.form.val('form-edit', res.data)
            }
        })
    })

    // 修改文章分类表单监听submit事件
    $('body').on('submit', '#form-edit', function(e) {
        e.preventDefault();
        const data = $(this).serialize();
        // 请求服务器更新数据
        axios.put('/my/cate/info', data).then(({ data: res }) => {
            if (res.code === 0) {
                // 提示用户
                layer.msg('更新分类成功!');
                // 关闭弹层
                layer.close(editIndex);
                // 刷新列表
                initCateList();
            }
        })

    })

    // 删除文章列表功能
    $('tbody').on('click', '.btn-delete', function() {
        let id = $(this).attr('data-id');
        if (id == 1 || id == 2) {
            return layer.msg('此数据不允许删除!')
        }
        layer.confirm('确认删除吗?', { icon: 3, title: '提示' }, function(index) {
            //do something
            axios.delete('/my/cate/del', {
                params: { id }
            }).then(({ data: res }) => {
                if (res.code === 0) {
                    layer.msg('删除数据成功!');
                    initCateList();
                }
            })
            layer.close(index);
        });
    })


})